<!-- 

file:///info/etu/m2/m2125/public_html/projet2/index.html
http://www-info.univ-lemans.fr/~m2125/projet2/index.html

-->

<!doctype html>
<html lang="en-au">
    <head>
        <title>jQuery.Gantt</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
        <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
        <link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" />
        <link rel="stylesheet" href="plugin/memu/memu-0.1.css" type="text/css">
		<style type="text/css">
			
			.contain {
				/*width: 800px;*/
				width:auto;
				margin: 0 auto;
			}
			h1 {
				margin: 40px 0 20px 0;
			}
			h2 {
				font-size: 1.5em;
				padding-bottom: 3px;
				border-bottom: 1px solid #DDD;
				margin-top: 50px;
				margin-bottom: 25px;
			}
			table th:first-child {
				width: 150px;
			}
		</style>
    </head>
    <body>
    <!-- <div data-role="page"> -->
    <div data-role="header" class="ui-bar-b">
	   
<!-- travail Guillaume - bouton filtre popup -->

				<!-- grille -->
		
	<style>	
		.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
		.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
		#activite .ui-icon { background:  url(homme.png) 50% 50% no-repeat; background-size: 24px 22px; }
		#outils .ui-icon { background:  url(outils.png) 50% 50% no-repeat; background-size: 24px 16px;  }
		#participants .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
		#apprenants .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
		#coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
		#skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
	</style>
	
	
		<div data-role="navbar" class="nav-glyphish-example" data-theme="b" data-grid="d">
		<ul>
			<li><select name="select-choice-1" id="outils" data-icon="custom" data-native-menu="false">
					<option><a href="#" id="outils" data-icon="custom">Activité</a></option>
					<option value="Activite_Cours">Cours</option>
					<option value="Activite_Projet">Projet</option>
					<option value="Activite_TP">TP</option>
					<option value="Activite_TD">TD</option></select></li>
			<li><a href="#" id="outils" data-icon="custom">Outils</a></li>
			<li><a href="#" id="participants" data-icon="custom">Participants</a></li>
			<li><a href="#" id="apprenants" data-icon="custom">Apprenants</a></li>
			<li><a href="#" id="coffee" data-icon="custom">Autres</a></li>
		</ul>
		</div>
	
		
		<div data-role="fieldcontain">
		 
		<ul data-role="controlgroup" data-type="horizontal">
			<li>
				<select name="select-choice-1" id="select-choice-1" data-native-menu="false">
					<option>Activité</option>
					<option value="Activite_Cours">Cours</option>
					<option value="Activite_Projet">Projet</option>
					<option value="Activite_TP">TP</option>
					<option value="Activite_TD">TD</option>
				</select>
			</li>
			<li>
				<select name="select-choice-2" id="select-choice-2" data-native-menu="false">
					<option>Outils</option>
					<option value="Outils_Depot">Dépôt</option>
					<option value="Outils_Forum">Forum</option>
					<option value="Outils_Consultation">Consultation</option>
				</select>
			</li>
			<li>		
				<select name="select-choice-3" id="select-choice-3" data-native-menu="false">
					<option>Participants</option>
					<option value="Participants_Class">Classe</option>
					<option value="Participants_TD">TD</option>
					<option value="Participants_Binome">Binôme</option>
					<option value="Participants_Individu">Individu</option>
				</select>
			</li>
			<li>
				<select name="select-choice-4" id="select-choice-4" data-native-menu="false">
					<option>Apprenants</option>
					<option value="Apprenants_Classe">Classe</option>
					<option value="Apprenants_TD">TD</option>
					<option value="Apprenants_Binome">Binôme</option>
					<option value="Apprenants_Individu">Individu</option>
				</select>	
			</li>
			<li>
				<a href="index.html" data-role="button">Semaine</a>
				<a href="index.html" data-role="button">Mois</a>
				<a href="index.html" data-role="button">Semestre</a>	
			</li>	
		</ul>
			<li>		
				<a href="#popupDialog" data-rel="popup" data-icon="gear" class="ui-btn-right" data-iconpos="notext" data-role="button">Options</a>
	        </li>  	
				
			
</div>
			
			
		</div>
			
				<!--
				 	<input type="range" name="slider1" id="slider1" value="1" min="1" max="3" />
				     <fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
				     </fieldset>
				-->

				<!-- fin grille -->
	
    </div> <!-- div header -->
    

<!-- fin travail Guillaume -->

				
		 <div class="gantt"></div> 
<!-- </div>  div page -->
			
    </body>

    
    <script src="jquery-1.8.2/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">		</script>
	<script src="js/jquery.fn.gantt.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
	<script src="js/bootstrap-popover.js"></script>
	<script src="js/prettify.js"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	
	<script type="text/javascript">
		  		</script>
    <script>

		$(function() {

			

			"use strict";

			$(".gantt").gantt({
				source: [{
					name: "Sprint 0",
					desc: "Analysis",
					values: [{
						from: "/Date(1320192000000)/",
						to: "/Date(1322401600000)/",
						label: "act1", 
						customClass: "ganttGreen"
					}]
				},{
					name: " ",
					desc: "Scoping",
					values: [{
						from: "/Date(1322611200000)/",
						to: "/Date(1323302400000)/",
						label: "act2", 
						customClass: "ganttRed"
					}]
				},{
					name: "Sprint 1",
					desc: "Development",
					values: [{
						from: "/Date(1323802400000)/",
						to: "/Date(1325685200000)/",
						label: "act3", 
						customClass: "ganttGreen"
					}]
				},{
					name: " ",
					desc: "Showcasing",
					values: [{
						from: "/Date(1325685200000)/",
						to: "/Date(1325695200000)/",
						label: "act4", 
						customClass: "ganttBlue"
					}]
				},{
					name: "Sprint 2",
					desc: "Development",
					values: [{
						from: "/Date(1326785200000)/",
						to: "/Date(1325785200000)/",
						label: "act5", 
						customClass: "ganttGreen"
					}]
				},{
					name: " ",
					desc: "Showcasing",
					values: [{
						from: "/Date(1328785200000)/",
						to: "/Date(1328905200000)/",
						label: "act6", 
						customClass: "ganttBlue"
					}]
				},{
					name: "Release Stage",
					desc: "Training",
					values: [{
						from: "/Date(1330011200000)/",
						to: "/Date(1336611200000)/",
						label: "act7", 
						customClass: "ganttOrange"
					}]
				},{
					name: " ",
					desc: "Deployment",
					values: [{
						from: "/Date(1336611200000)/",
						to: "/Date(1338711200000)/",
						label: "act8", 
						customClass: "ganttOrange"
					}]
				},{
					name: " ",
					desc: "Warranty Period",
					values: [{
						from: "/Date(1336611200000)/",
						to: "/Date(1349711200000)/",
						label: "act9", 
						customClass: "ganttRed"
					}]
				}],
				navigate: "scroll",
				scale: "weeks",
				maxScale: "months",
				minScale: "days",
				itemsPerPage: 10,
				onItemClick: function(data) {
					alert("Item clicked - show some details");
				},
				onAddClick: function(dt, rowId) {
					alert("Empty space clicked - add an item!");
				},
				onRender: function() {
					if (window.console && typeof console.log === "function") {
						console.log("chart rendered");
					}
				}
			});

			$(".gantt").popover({
				selector: ".bar",
				title: "I'm a popover",
				content: "And I'm the content of said popover."
			});

			prettyPrint();
			
			

		});
		google.load("jquery", "1.4.4");
		  google.setOnLoadCallback(function() {
			$('.js-enabled').memu({ 
				icon: {
					inset: true,
					margin: {
						top: 4,
						right: 10
					}
				},
				width: 150,
				rootWidth: 75,
				height: 25
			});
		  });
		

    </script>
    <script type="text/javascript" src="plugin/memu/jquery.memu-0.1.min.js"></script>
</html>